<template>
  <div class="app-container">


    <!-- 表格组件 -->
    <ex-tree-table
      ref="exTreeTable"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading.sync="loading"
      @handleCreateEmit="handleCreateEmit"
      @handleUpdateEmit="handleUpdateEmit"
      @handleRmoveColEmit="handleRmoveColEmit"
      @handleAddSonNodeEventEmit="handleAddSonNodeEventEmit"
      >
    </ex-tree-table>


    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData.sync="formSubmitData"
      :parentNodeName="parentNodeName"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
      @handleFromAddSonNodeEmit="handleFromAddSonNodeEmit"
      @resetFormDataEmit="resetFormSubmitData"
      >
    </submit-form>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import XEUtils from 'xe-utils'

import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'

import {
  findMenu,
  addMenu,
  updateMenu,
  deleteMenu,
  addp_code,
  addp_code_zi,
  } from './service/baseApi'
// 基础表格组件
import ExTreeTable from './components/ExTreeTable'

// 文章表单
import SubmitForm from './components/SubmitForm'


export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData],
  components: {
    //PageHeaderLayout,
    ExTreeTable,
    SubmitForm,
  },
  props: {
    /* 当前选中方案 */
    // currentRow: {
    //   type: Object,
    //   default() {
    //     return {}
    //   }
    // },
    // /* 当前选中方案的已选因子 */
    // factorSelected: {
    //   type: Array,
    //   default() {
    //     return []
    //   }
    // }
  },
  // 定义属性
  data() {
    return {
      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      parentNodeName: '',  //父级节点名称
      // 表单数据对象
      formSubmitData: {
        id: undefined,
        path:'',                //url路径
        component:'',           //路由渲染组件
        always_show:true,         //如果设置为true，将总是显示根菜单  *如果没有设置alwaysShow，当item有多个子元素route时，  *它将成为嵌套模式，否则不显示根菜单
        name:'',                //路由名称，该名称由<keep-alive>使用(必须设置!!)  
        redirect:'noRedirect',            //如果设置noRedirect将不会在面包屑中进行重定向  
        hiden:false,               //是否隐藏路由
        // meta_roles:'',          //控制页面角色(可以设置多个角色)  
        meta_title:'',          //在侧边栏和面包屑中显示的名称键值(使用i18n组渲染最终标题)  
        meta_icon:'',           //图标显示在侧边栏中  
        meta_no_cache:false,       //如果设置为true，页面将不会被缓存(默认为false)  
        meta_affix:false,          //如果设置为true，标记将附加在标记视图中  
        meta_breadcrumb:true,     //如果设置为false，该项目将隐藏在breadcrumb中(默认为true)  
        meta_active_menu:'',    //如果设置了路径，侧边栏将突出显示您设置的路径  
        p_code:'',              //节点
        p_name:'',              //节点名称
        parent_code:'0',         //父节点
        status: true,            //路由状态
      },
      initFormSubmitData: {
        path:'',                //url路径
        component:'',           //路由渲染组件
        always_show:true,         //如果设置为true，将总是显示根菜单  *如果没有设置alwaysShow，当item有多个子元素route时，  *它将成为嵌套模式，否则不显示根菜单
        name:'',                //路由名称，该名称由<keep-alive>使用(必须设置!!)  
        redirect:'noRedirect',            //如果设置noRedirect将不会在面包屑中进行重定向  
        hiden:false,               //是否隐藏路由
        // meta_roles:'',          //控制页面角色(可以设置多个角色)  
        meta_title:'',          //在侧边栏和面包屑中显示的名称键值(使用i18n组渲染最终标题)  
        meta_icon:'',           //图标显示在侧边栏中  
        meta_no_cache:false,       //如果设置为true，页面将不会被缓存(默认为false)  
        meta_affix:false,          //如果设置为true，标记将附加在标记视图中  
        meta_breadcrumb:true,     //如果设置为false，该项目将隐藏在breadcrumb中(默认为true)  
        meta_active_menu:'',    //如果设置了路径，侧边栏将突出显示您设置的路径  
        p_code:'',              //节点
        p_name:'',              //节点名称
        parent_code:'0',         //父节点
        status: true,            //路由状态
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据



    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {

  },
  // 方法集合
  methods: {
    /* API数据操作相关 */
    // 获取首节点编码
    async getaddp_code() {
      return await addp_code({}).then(({data}) => {
        return data.rows.p_code
      })
    },
    // 获取子节点编码
    async getaddp_code_zi(parent_code) {
      return await addp_code_zi({
        parent_code
      }).then(({data}) => {
        return data.rows.p_code
      })
    },

    // 查询数据
    findList() {
      this.loading = true
      // console.log(' this.formSearchData:::', this.formSearchData);
      // 请求表格数据

      findMenu({}).then(({data}) => {
        // console.log('response:....', data);
        // 给表格数据赋值
        const treeData = XEUtils.toArrayTree(data.rows, {
          key: 'p_code',
          parentKey: 'parent_code',
        })
        // console.log('treeDatatreeData', treeData);
        this.tableData = treeData
        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        // { type: 'seq', width: 60, fixed: null },
        // { type: 'checkbox', width: 50, fixed: null },
        // {field: 'path', title: 'url路径', width: 250, treeNode: true, fixed: 'left'},
        // { field: 'ID', title: '主键', width: 200 , showOverflow: true},
        {field: 'name', title: '路由名称', width: 300, treeNode: true, fixed: 'left'},
        {field: 'path', title: 'url路径', width: 350},
        {field: 'meta_title', title: 'meta-名称键值', width: 200},
        {field: 'p_name', title: '节点名称', width: 200},
        {field: 'parent_code', title: '父节点', width: 200},
        {
          field: 'status', title: '状态', width: 300, formatter(obj) {
            console.log('formatterformatter', obj);
            if (obj.cellValue === 0) {
              return "无效"
            } else {
              return "有效"
            }
          }
        }
      ]
      this.tableColumn = tabCols;
    },
    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type) {
      this.getaddp_code().then((p_code) => {
        // 重置表单内容
        this.resetFormSubmitData({
          replaceObj: {
            p_code
          }
        })
        this.parentNodeName = '首'
        this.dialogStatus = type
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.submitForm.$refs['dataForm'].clearValidate()
        })
      })
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      let {children, mod_date, mod_us_code, ...params} = Object.assign({}, row) // copy obj
      console.log('item:', params);
      params = XEUtils.objectMap(params, item => {
        return (XEUtils.isNull(item)) ? '' : item
      })
      console.log('item2:', params);
      this.formSubmitData = params
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 单行删除
    handleRmoveColEmit(row) {
      console.log('delrow:', row);
      if (row.children.length > 0) {
        this.$message.error('删除失败:还有子集！');
        return false;
      }
      deleteMenu({
       id:row.id
      }).then(({data}) => {
        // this.dialogFormVisible = false
        // this.$refs.exTreeTable.$refs.xTree.remove(row)
        this.findList()
      })

    },
    // 行内按钮-新增子节点
    handleAddSonNodeEventEmit(row, type) {

      this.getaddp_code().then((p_code) => {
        // 重置表单内容
        this.resetFormSubmitData({
          replaceObj: {
            parent_code: row.p_code, //曲线名称,
            p_code:p_code
          },
        })
        this.parentNodeName = row.p_name
        this.dialogStatus = type
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.submitForm.$refs['dataForm'].clearValidate()
        })
      })

    },

    /* 表单组件相关 */
    // 修改节点
    handleFromUpdateDataEmit() {
      updateMenu({
        ...this.formSubmitData
      }).then(({data}) => {
        this.dialogFormVisible = false
        this.findList()
      })

    },
    // 新增首节点
    handleFromCreateDataEmit() {

      addMenu({
        ...this.formSubmitData
      }).then(({data}) => {
        // this.dialogFormVisible = false
        this.findList()
        this.getaddp_code().then((p_code) => {
        // 重置表单内容
        this.resetFormSubmitData({
          replaceObj: {
            p_code
          }
        })
        this.$nextTick(() => {
          this.$refs.submitForm.$refs['dataForm'].clearValidate()
        })
      })


      })
    },
    // 新增子节点
    handleFromAddSonNodeEmit() {
      addMenu({
        ...this.formSubmitData
      }).then(({data}) => {
        // this.dialogFormVisible = false
        this.findList()
        this.getaddp_code_zi(this.formSubmitData.parent_code).then((p_code) => {
        // 重置表单内容
        this.resetFormSubmitData({
          replaceObj: {
            parent_code: this.formSubmitData.parent_code, //曲线名称,
            p_code:p_code
          },
        })
        this.$nextTick(() => {
          this.$refs.submitForm.$refs['dataForm'].clearValidate()
        })
      })

      })
    },
    

  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}
</style>